<%@page import="br.com.rampage.model.bo.PacienteBO"%>
<%@page import="br.com.rampage.utils.ConnectionUsersUtil"%>
<%@page import="br.com.rampage.model.bean.Paciente"%>
<%@page import="br.com.rampage.utils.BoxDependente"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rampage</title>
<link rel="shortcut icon" href="tools/icon.ico" type="image/x-icon">

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<%!Paciente paciente;%>
	<%
		if (ConnectionUsersUtil.hasSessionWithId(request.getSession()
				.getId())) {
			paciente = (Paciente) ConnectionUsersUtil
					.getUserFromSessionId(request.getSession().getId());
		} else {
			response.sendRedirect(request.getContextPath());
		}
	%>

	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a href="carteira.jsp" class="navbar-brand"><span
					class="glyphicon glyphicon-tint"></span> E-Vaccine</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="carteira.jsp"><span
							class="glyphicon glyphicon-home"></span> Minha Carteira</a></li>
					<li class="active"><a href="dependentes.jsp"><span
							class="glyphicon glyphicon-user"></span> Meus Dependetes</a></li>
					<li><a href="alterar_dados.jsp"><span
							class="glyphicon glyphicon-edit"></span> Alterar Cadastro</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="<%=request.getContextPath()%>/Logout"><span
							class="glyphicon glyphicon-off"></span> Sair do Sistema</a></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container-fluid">

		<%
			List<BoxDependente> boxs = new PacienteBO().getDepedentes(paciente);
			int x = 0; // contador para a lista boxs
			int aux = (boxs.size() / 6) + 1;

			for (int i = 1; i <= aux; i++) {
		%>

		<div class="row-fluid" align="center">
			<!-- Add the extra clearfix for only the required viewport -->
			<div class="clearfix visible-sm"></div>

			<!-- Add the extra clearfix for only the required viewport -->
			<div class="clearfix visible-xs"></div>

			<%
				int j = 1;
					while (j <= 6 && x < boxs.size()) {
			%>
			<div class="col-xs-12 col-sm-4 col-md-2">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">
							<span class="glyphicon glyphicon-pushpin"></span>
							<%=boxs.get(x).getNome()%>
						</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group">
							<li class="list-group-item"><%=boxs.get(x).getSexo()%></li>
							<li class="list-group-item"><%=boxs.get(x).getDataNascimento()%></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- end for interno -->
			<%
				j++;
						x++;
					}
			%>

		</div>
		<!-- row -->
		<%
			}
		%>

	</div>
	<!--container  -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>
</body>
</html>